import { computed } from 'vue'

export default function useWatermarkBg(props){
    return computed(()=>{
        const canvas = document.createElement('canvas')
        const devicePixelRatio = window.devicePixelRatio || 1
        const fontSize = props.fontSize * devicePixelRatio
        // const fontSize = 40
        const font = fontSize + 'px  Inter, system-ui, Avenir, Helvetica, Arial, sans-serif'
        const ctx = canvas.getContext('2d')

        // 获取文字宽度
        ctx.font = font
        const { width } = ctx.measureText(props.text)
        const canvasSize = Math.max(100,width) + props.gap * devicePixelRatio
        canvas.width = canvasSize
        canvas.height = canvasSize
       
        // 清晰都
        ctx.translate(canvas.width/2, canvas.height/2)
        ctx.rotate((Math.PI / 180) * - 20)//旋转角度
        ctx.fillStyle = 'rgba(0,0,0,0.12)'
        ctx.font = font
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(props.text,0,0)


        return {
            base64: canvas.toDataURL(),
            size:canvasSize,
            styleSize: canvasSize / devicePixelRatio * 0.5
        }

    })
}